<!--{subtemplate inc/header}-->
<script type="text/javascript" src="http://ditu.google.cn/maps/api/js?sensor=false"></script>
<div class="blank12"></div>
<!--{if $city_areas}-->
<div class="hbox">
	<div class="list-goods-search">
		<div class="lgs-item lgs-area parent-area">
			<div class="lgsi-title">商圈</div>
			<div class="lgsi-list">
				<a href="javascript:;" class="{if $cate_id == 0}active{/if}" area="" rel="0">全部</span></a>
				<!--{loop $city_areas['roots'] $rootid}-->
				<!--{eval $root_area = $city_areas['all'][$rootid];}-->
				<a href="javascript:;" area="$root_area['name']" lng="$root_area['longitude']" lat="$root_area['latitude']" rel="$rootid">$root_area['name']</a>
				<!--{/loop}-->
			</div>
		</div>
		<!--{loop $city_areas['roots'] $rootid}-->
		<!--{eval $root_area = $city_areas['all'][$rootid];}-->
		<!--{if isset($root_area['childs'])}-->
		<div class="lgs-item area-sub lgs-area" rel="$rootid">
			<div class="lgsi-list">
				<strong>$root_area['name']:</strong>
				<div>
					<!--{loop $root_area['childs'] $childid}-->
					<!--{eval $area = $city_areas['all'][$childid];}-->
					<a href="javascript:;" area="$area['name']" lng="$area['longitude']" lat="$area['latitude']">$area['name']</a>
					<!--{/loop}-->
				</div>
			</div>
		</div>
		<!--{/if}-->
		<!--{/loop}-->
	</div>
</div>
<!--{/if}-->
<div class="blank9"></div>
<div id="map-box" class="hbox" style="position:relative;">
<div id="maps-left">
	<div class="ml-search">
		<p>我现在的位置：</p>
		<input type="text" id="address" class="f-input" />
		<input type="button" id="search-address" class="formbutton1" value="查询" />
	</div>
	<div class="ml-list">
		<div class="t">
			<p>共有 <strong id="supplierCount"></strong> 个</p>
			<select id="sort">
				<option value="id">最新团购</option>
				<option value="bought">购买人数</option>
			</select>
		</div>
		<div class="m" id="goodsList"></div>
		<div class="b" id="goodsPages">
			<p class="fl">第<span id="pageIndex">1</span>页/共<span id="pageCount">2</span>页</p>
			<p class="fr"><a id="pagePrev">上一页</a>&nbsp;<a id="pageNext">下一页</a></p>
		</div>
	</div>
</div>
<div id="maps-right">
	<div class="t">
		<ul>
			<li class="current" cateID='0'>
				<img src="{TPL_PATH}images/map/cate/a.gif" />
				<p>所有</p>
			</li>
			<!--{loop $_FANWE['cache']['goods']['root_cates'] $rootid}-->
			<!--{eval $cat = $_FANWE['cache']['goods']['cats'][$rootid];}-->
			<li cateID='$cat[id]'>
				<img src="{TPL_PATH}images/map/cate/{$rootid}.gif" />
				<p>$cat[name]</p>
			</li>
			<!--{/loop}-->
		</ul>
	</div>
	<div id="mapBox"></div>
</div>
<div class="clear"></div>
</div>
<script type="text/javascript">
var map;
var markers = new Array();
var infoWindow;
var are="$_FANWE[current_city][name]";
var page = 1;
var pageCount = 1;

jQuery(function($){
	$(".lgs-area a").click(function(){
		var rel = this.getAttribute("rel");
		$('a',$(this).parent()).removeClass('active');
		$('.area-sub a').removeClass('active');
		
		if(rel != null)
		{
			$(".area-sub").hide();
			var active = $(".area-sub[rel='"+ rel +"']");	
			active.show();
			
			var title_width = $('strong',active).width();
			$('.lgsi-list div',active).width(903 - title_width);
		}
		
		$(this).addClass('active');
		
		var parent_name = '';
		var sub_name = '';
		var lng="";
		var lat=""
		
		if($(".parent-area a.active").length > 0)
		{
			var parent_area = $(".parent-area a.active").get(0);
			parent_name = parent_area.getAttribute('area');
			lng = parent_area.getAttribute('lng');
			lat = parent_area.getAttribute('lat');
		}
		
		if(parent_name != '')
		{
			parent_name = ' ' + parent_name;
			if($(".area-sub a.active").length > 0)
			{
				var sub_area = $(".area-sub a.active").get(0);
				sub_name = 	' ' + sub_area.getAttribute('area');
				lng = sub_area.getAttribute('lng');
				lat = sub_area.getAttribute('lat');
			}
		}
		
		var address = are + parent_name + sub_name;
		
		if(Math.abs(lng) > 0 && Math.abs(lat) > 0)
		{
			clearMarkers(0);
			var latLng = new google.maps.LatLng(lat,lng);
			map.setCenter(latLng);
			var marker = new google.maps.Marker({"map":map,title:address,position:latLng});
			markers.push(marker);
			getSupplierGoods();
		}
		else
			searchPosition(address);
	});
	
	$(".lgs-price a").click(function(){
		$('.lgs-price a').removeClass('active');
		$(this).addClass('active');
		getSupplierGoods();
	});
	
	map = new google.maps.Map($("#mapBox").get(0),{
        zoom: 11,
		mapTypeId:google.maps.MapTypeId.ROADMAP,
        mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
        }
    }); 
	
	google.maps.event.addListener(map,"dragend",getMaps);
	google.maps.event.addListener(map,"zoom_changed",getMaps);
	
	infoWindow = new google.maps.InfoWindow({
        maxWidth: 350
    });
	
	if(are!="")
		searchPosition(are);
	else
		searchPosition("北京");
	
	updateEndTime();
	
	$("#search-address").click(function(){
		var address = $.trim($("#address").val());
		
		if(address == "")
		{
			if(are!="")
				searchPosition(are);
			else
				searchPosition("北京");	
		}
		else
			searchPosition(address);
			
	});
	
	$("#maps-right .t li").click(function(){
		$("#maps-right .t li").removeClass("current");
		$(this).addClass("current");
		clearMarkers();
		getSupplierGoods();
	});
	
	$("#sort").change(function(){
		clearMarkers();
		getSupplierGoods();
	});
	
	$("#pagePrev").click(function(){
		if(page > 1)
			page = page -1;
			
		getSupplierGoods();
	});
	
	$("#pagePrev").click(function(){
		if(page > 1)
		{
			$.showLoading("#map-box");
			page = page -1;
			clearMarkers();
			getSupplierGoods();
		}
	});
	
	$("#pageNext").click(function(){
		if(page < pageCount)
		{
			$.showLoading("#map-box");
			page = page + 1;
			clearMarkers();
			getSupplierGoods();
		}
	});
});

function searchPosition(address)
{
    var geocoder = new google.maps.Geocoder();
	
    geocoder.geocode({"address":address},function(result,status){
		if (status == google.maps.GeocoderStatus.OK) 
		{
			clearMarkers(0);
			
			var latLng = result[0].geometry.location;
			
			map.setCenter(latLng);
			
			var marker = new google.maps.Marker({"map":map,title:address,position:latLng});
			
			markers.push(marker);
			
			getSupplierGoods();
		}
		else
		{
			alert("查询不到 " + address);
		}
    })
}

function clearMarkers(count)
{
	markers.reverse();
	
	if(count == null)
		count = 1;
	
	while(markers.length > count)
	{
		var marker = markers.shift();
		marker.setMap(null);
	}
}

function getMaps()
{
	page = 1;
	pageCount = 1;
	clearMarkers();
	getSupplierGoods();
}

function getSupplierGoods()
{
	$.showLoading("#map-box");
	infoWindow.close();
	$("#goodsList").html("");
	var latLngBounds = map.getBounds();
	var sw = latLngBounds.getSouthWest();
	var ne = latLngBounds.getNorthEast();
	//$("#china").val(sw.lat()+"|"+sw.lng()+"\r\n"+ne.lat()+"|"+ne.lng());
	
	var query = new Object();
	query.action = "get_maps";
	query.min_lng = sw.lng();
	query.min_lat = sw.lat();
	query.max_lng = ne.lng();
	query.max_lat = ne.lat();
	query.page = page;
	query.sort = $("#sort").val();
	query.cate = $("#maps-right .t li.current").get(0).getAttribute("cateID");
	
	$.ajax({
		type:"POST",
		url:SITE_PATH + "/services/ajax.php",
		data:query,
		dataType:"json",
		cache:false,
		success: function(result){
			setMarkers(result);
		}
	});
}

function setMarkers(result)
{
	$.closeLoading("#map-box");
	var markerList = new Object();
	
	var i = 0;
	var sindex = 1;
	
	page = result.pages.page;
	pageCount = result.pages.pageCount;
	
	if(result.pages.pageCount > 1)
	{
		$("#pageIndex").html(result.pages.page);
		$("#pageCount").html(result.pages.pageCount);
		$("#goodsPages").show();
		$("#goodsList").height(460);
	}
	else
	{
		$("#goodsPages").hide();
		$("#goodsList").height(488);
	}
	
	for(i; i < result.supplierList.length; i++)
	{
		var supplier = result.supplierList[i];
		var goods = result.goodsList["g"+supplier.goods_id];
		
		if(goods)
		{
			supplier.index = sindex;
			supplier.goods = goods;
			var longitude = supplier.longitude.replace(".","");
			var latitude = supplier.latitude.replace(".","");
			var attr = longitude.concat(latitude);
			if(markerList[attr] == null)
			{
				markerList[attr] = new Object();
				markerList[attr].index = sindex;
				markerList[attr].longitude = supplier.longitude;
				markerList[attr].latitude = supplier.latitude;
			}
			
			if(markerList[attr].names == null)
				markerList[attr].names = new Array();
			
			var n = 0;
			var nbln = true;
			for(n; n < markerList[attr].names.length; n++)
			{
				var name = markerList[attr].names[n];
				if(name == supplier.name)
					nbln = false;
			}
			
			if(nbln)
				markerList[attr].names.push(supplier.name);
			
			if(markerList[attr].suppliers == null)
				markerList[attr].suppliers = new Array();
			
			markerList[attr].suppliers.push(supplier);
			
			sindex++;
		}
	}
	
	$("#supplierCount").html(result.pages.goodsCount);
	
	for(var a in markerList)
	{
		var markerItem = markerList[a];
		createMarker(markerItem);
	}
}

function createMarker(marker)
{
	var latLngItem = new google.maps.LatLng(marker.latitude,marker.longitude);
	var title = marker.names.join("\r\n");
	var content = createInfoContent(marker);
	var cid = marker.suppliers[0].goods.cate_id;
	
	var iconC = new google.maps.MarkerImage("{TPL_PATH}images/map/mc/"+cid+"o.png", new google.maps.Size(20, 32), new google.maps.Point(0, 0), new google.maps.Point(0, 32));
	
	var iconI = new google.maps.MarkerImage("{TPL_PATH}images/map/index/"+marker.index+".png", new google.maps.Size(25, 32), new google.maps.Point(0, 0), new google.maps.Point( - 15, 32));
	
	var shadow = new google.maps.MarkerImage("{TPL_PATH}images/map/shadow.png", new google.maps.Size(52, 32), new google.maps.Point(0, 0), new google.maps.Point(0, 32));
	
	var shape = {
		coord: [1, 1, 1, 20, 28, 20, 28, 1],
		type: "poly"
	};

	var markerI = new google.maps.Marker({
		map:map,
		position:latLngItem,
		icon:iconC,
		title:title,
		shadow:shadow,
		shape:shape
	});
	
	google.maps.event.addListener(markerI, "click",function(){
		infoWindowShow(markerI,content);
	});
	
	var markerC = new google.maps.Marker({
		map: map,
		position:latLngItem,
		icon: iconI,
		title: title
	});
	
	google.maps.event.addListener(markerC, "click",function(){
		infoWindowShow(markerC,content);
	});
	
	createGoodsItem(marker,markerI,content);
	
	markers.push(markerI);
	markers.push(markerC)
}

function createInfoContent(marker)
{
	var html = "";
	
	if(marker.suppliers.length > 1)
		html += '<div class="popGoodsList popScroll">';
	else
		html += '<div class="popGoodsList">';
		
	var i = 0;
	
	for(i;i < marker.suppliers.length;i++)
	{
		if(i > 0)
			html += "<hr/>";
			
		var supplier = marker.suppliers[i];
		var goods = supplier.goods;
		
		html += '<dl><dt><a href="'+goods.site_url+'">'+goods.site_name+'</a><p endTime="'+goods.end_time+'">【'+goods.end_time_format+'】</p></dt><dd><div class="title"><a href="'+goods.url+'" title="'+goods.name+'">'+goods.name+'</a></div><table cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td class="img"><a href="'+goods.url+'"><img src="'+goods.small_img+'" alt="'+goods.name+'" /></a></td><td class="attr"><p><span>'+goods.bought+'</span> 人购买</p><p>原价：<span>'+goods.market_price_format+'</span></p><p>折扣：<span>'+goods.discount+'</span> 折</p><p>现价：<span>'+goods.shop_price_format+'</span></p><p>节省：<span>'+goods.save_format+'</span></p></td></tr><tr><td colspan="2" class="supplier">【'+supplier.name+'】'+supplier.address+'</td></tr></table></dd></dl>';
	}
	
	html += '</div>';
	return html;
}

function createGoodsItem(markerItem,marker,content)
{
	var i = 0;
	for(i;i < markerItem.suppliers.length;i++)
	{	
		var div = document.createElement("DIV");
		$(div).addClass("item");
		var html = "";
		var supplier = markerItem.suppliers[i];
		var goods = supplier.goods;
		var index = (supplier.index % 26);
		
		if(index == 0)
			index = 26;
		
		html += '<div class="i1" index="'+(i+1)+'"><img src="{TPL_PATH}images/map/index/'+index+'.png" /><a href="javascript:;" title="【'+supplier.name+'】'+goods.name+'">【'+supplier.name+'】'+goods.name+'</a></div>';
		$(div).html(html);
		$("#goodsList").append(div);
		$(div).click(function(){
			infoWindowShow(marker,content);
		});
	}
}

function infoWindowShow(marker,content)
{
	$(".popGoodsList").remove();
	infoWindow.setContent(content);
	infoWindow.open(map,marker);
}

function updateEndTime()
{
	var date = new Date();
	var time = date.getTime();
	
	$(".popGoodsList dt p").each(function(i){
		var endDate =new Date(this.getAttribute("endTime"));
		var endTime = endDate.getTime();
		var lag = (endTime - time) / 1000;
		if(lag > 0)
		{
			var second = Math.floor(lag % 60);     
			var minite = Math.floor((lag / 60) % 60);
			var hour = Math.floor((lag / 3600) % 24);
			var day = Math.floor((lag / 3600) / 24);
			$(this).html("【<span>"+day+"</span>天<span>"+hour+"</span>小时<span>"+minite+"</span>分<span>"+second+"</span>秒】");
		}
		else
			$(this).html("【团购已经结束啦！】");
	});
	
	setTimeout("updateEndTime()",1000);
}
</script>
<!--{subtemplate inc/footer}-->